<template>
  <div class="main">
    <view class="flex justifyCenter" @click="uploadAvatar">
      <uv-avatar :src="valueDate.avatarUrl" size="76" v-if="valueDate.avatarUrl"></uv-avatar>
      <view class="avatar" v-else>
        <uv-icon name="camera" size="28" color="#000000"></uv-icon>
      </view>
    </view>

    <view class="item">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">起个好听的名字</view>
        <view class="change flex alignCenter" @click="getNickName">
          <uv-image src="https://oss.seenlove.com/images/b142863644ea2925ba760669db89be16.png" width="10px" height="10px"></uv-image>
          <text class="fz12">换一换</text>
        </view>
      </view>
      <uv-input v-model="valueDate.nickName" disabled border="none" shape="circle" placeholder="请选择昵称" :customStyle="inputStyle">
      </uv-input>
    </view>

    <view class="item">
      <view class="flex alignCenter">
        <view class="bold fz14">选择您的性别</view>
        <view class="tips fz12">
          选择性别后将无法更改哦～
        </view>
      </view>
      <view class="sex flex">
        <view class="box flex man" :class="{active: valueDate.sex ==='MAN'}" @click="valueDate.sex='MAN'">
          <view class="icon">
            <uv-icon name="man" size="15" color="#ffffff"></uv-icon>
          </view>
          <view class="name">男生</view>
        </view>
        <view class="box flex woman" :class="{activeWoman: valueDate.sex ==='WOMAN'}" @click="valueDate.sex='WOMAN'">
          <view class="icon">
            <uv-icon name="woman" size="15" color="#ffffff"></uv-icon>
          </view>
          <view class="name">女生</view>
        </view>
      </view>
    </view>

    <view class="item">
      <view class="flex alignCenter">
        <view class="bold fz14">选择您的生日</view>
        <view class="tips fz12">
          您是{{valueDate.constellation||"摩羯座"}}哦～
        </view>
      </view>
      <!-- 日期时间选择器 -->
      <picker-view @change="bindChange" class="picker-view" :value="birthday">
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==birthday[0]}" v-for="(item,index) in dateTime.years" :key="index">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==birthday[1]}" v-for="(item,index) in dateTime.months" :key="index">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==birthday[2]}" v-for="(item,index) in dateTime.days" :key="index">{{item}}日</view>
        </picker-view-column>
      </picker-view>
    </view>

    <view class="next flex justifyFlexEnd">
      <uv-button @click="next" :customStyle="nextBtnStyle" text="下一步" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue", "fatherMethod"]);
const instance = getCurrentInstance();

const valueDate = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
let inputStyle = ref({
  backgroundColor: "#F6F6F6",
  padding: "10px 23px",
  marginTop: "11px",
});
let nextBtnStyle = ref({
  width: "100px",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});

let birthday = ref([]); //生日

onMounted(() => {
  getNickName();
  setBirthday();
});

let dateTime = computed(() => {
  const date = new Date();
  const years = [];
  const year = date.getFullYear();
  const months = [];
  const month = date.getMonth() + 1;
  const days = [];
  const day = date.getDate();
  for (let i = 1990; i <= date.getFullYear(); i++) {
    years.push(i);
  }
  for (let i = 1; i <= 12; i++) {
    months.push(i);
  }
  for (let i = 1; i <= 31; i++) {
    days.push(i);
  }
  return {
    years,
    year,
    months,
    month,
    days,
    day,
  };
});

let setBirthday = () => {
  birthday.value = [0, 0, 0];
};

let getNickName = async () => {
  let data = await proxy.$apis.getNickName();
  valueDate.value.nickName = data;
};
let bindChange = async (e) => {
  let val = e.detail.value;
  birthday.value = e.detail.value;
  let year = dateTime.value.years[val[0]];
  let month = dateTime.value.months[val[1]];
  let day = dateTime.value.days[val[2]];
  valueDate.value.birthday = `${year}-${proxy.$utils.p(month)}-${proxy.$utils.p(
    day
  )}`;
  let data = await proxy.$apis.getConstellation({
    birthday: valueDate.value.birthday,
  });
  valueDate.value.constellation = data; //星座
};

let uploadAvatar = async () => {
  let resp = await proxy.$auth.chooseImage();
  proxy.$utils.toLink(`/packagePages/func/pictureCropper?url=${resp[0]}`);
};

let next = async () => {
  if (!valueDate.value.logoId) return proxy.$utils.showToast("请上传头像");
  if (!valueDate.value.birthday) return proxy.$utils.showToast("请选择生日");
  let age = proxy.$utils.calculateAge(valueDate.value.birthday);
  if (age < 18) {
    await proxy.$utils.showModal({
      showCancel: false,
      content: `
        感谢您对我们产品的关注与兴趣。根据国家关于未成年人网络保护的相关法律法规，为了营造一个更加健康、安全的网络环境，我们平台要求用户在注册时需满足一定的年龄条件。我们注意到您可能未满18岁，因此，目前无法直接完成注册流程。再次感谢您的理解与配合，我们期待在合适的时机为您提供服务。
        祝您生活愉快！`,
    });
  } else {
    emit("fatherMethod");
  }
};
</script>



<style lang="scss" scoped>
.avatar {
  padding: 23px;
  border-radius: 50%;
  background-color: #ffe0fc;
  border: 1px dashed #c6a5fc;
  display: inline-block;
}
.item {
  margin-top: 30px;
  .change {
    text {
      color: #999999;
      margin-left: 6px;
    }
  }
  .tips {
    margin-left: 10px;
    color: #999999;
  }
  .sex {
    margin-top: 11px;
    .active {
      background-color: #cdf0ff !important;
      border: 1px solid #009dff !important;
    }
    .activeWoman {
      background-color: #ffe0fc !important;
      border: 1px solid #ff67a6 !important;
    }
    .man {
      .icon {
        background-color: #44c0fb;
      }
    }
    .woman {
      .icon {
        background-color: #ff67a6;
      }
    }
    .box {
      background-color: #f6f6f6;
      border: 1px solid transparent;
      border-radius: 26.5px;
      padding: 11px 15px;
      margin-right: 25px;
      .icon {
        padding: 5px 8px;

        border-radius: 9.5px;
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
}
.next {
  margin-right: 10vw;
  margin-top: 10vw;
}
.picker-view {
  width: 100%;
  height: 150px;
  .timeItem {
    line-height: 34px;
    text-align: center;
  }
}
</style>
